<template>
    <div class="text-sm font-medium flex flex-col">
        <template v-if="simple">{{
            getSimpleMeaningString(getWord(word))
        }}</template>

        <template v-else>
            <div class="inline-block">
                <div class="inline-block text-start">
                    <div v-for="e of getMeaningMap(getWord(word))">
                        <span class="m2 text-amber">{{ e[0] }}</span>
                        <span v-for="m of e[1]" class="text-blueGray">
                            {{ m }}
                        </span>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
    import { useWordStore } from "../../store"
    const { getWord, getSimpleMeaningString, getMeaningMap } = useWordStore()

    defineProps<{
        word: string
        simple?: boolean
    }>()
</script>
